<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>订单详情</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/meanmenu.min.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <link rel="stylesheet" href="css/nivo-slider.css">
    <link rel="stylesheet" href="css/jquery-ui-slider.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.simpleLens.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.simpleGallery.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="layui/css/layui.css" media="all"></script>
</head>
<body>
<div id="header11"></div>
<div class="breadcurb-area">
    <div class="container">
        <ul class="breadcrumb">
            <li class="home"><a href="index.html">首页</a>
            <li>
            <li><a href="buyerMassage.html">订单详情</a>
            <li>
        </ul>
    </div>
</div><!-- End Breadcurb Area -->
<div class="chart-area">
    <div class="container">
        <div class="row">
            <div class="col-md-12" id="massgae">

                <!--订单信息DIV-->
                <div id="orderMassage" class="chart-item table-responsive fix">
                    <table id="buyerTable">
                        <thead>
                        <tr>
                            <th>订单号</th>
                            <th>创建时间</th>
                            <th>支付时间</th>
                            <th>成交时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr style="color: black">
                            <td>{{order.orderNum}}</td>
                            <td>{{order.buildTime}}</td>
                            <td>
                                <template v-if="order.flage != '2'">
                                    <template v-if="order.paymentTime != null">
                                        <a style="color: black">{{order.paymentTime}}</a>
                                    </template>
                                    <template v-else>
                                        <a style="color: red">未支付</a>
                                    </template>
                                </template>
                                <template v-else>
                                    <a style="color: red">订单已过期</a>
                                </template>
                            </td>
                            <td>
                                <template v-if="order.flage =='3'">
                                    <a style="color: black">{{order.dealTime}}</a>
                                </template>
                                <template v-else>
                                    <a style="color: red">订单未成交</a>
                                </template>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <!--商品信息DIV-->
                <div id="goodsMassage" class="chart-item table-responsive fix" style="margin: 30px 0">
                    <table>
                        <thead>
                        <tr>
                            <th>商品名</th>
                            <th>商品种类</th>
                            <th>成交价格(元)</th>
                            <th>出售人</th>
                            <th>手续费(元)</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr style="color: black">
                            <td>{{order.gname}}</td>
                            <td>{{order.cname}}</td>
                            <td>{{order.transactionPerice}}</td>
                            <td>{{order.vname}}</td>
                            <td>{{order.charges}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <!--快递信息DIV-->
                <div id="payMassage" class="chart-item table-responsive fix">
                    <table>
                        <thead>
                        <tr>
                            <th>快递单号</th>
                            <th>收货人</th>
                            <th>收货电话</th>
                            <th>收货地址</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr style="color: black">
                            <td>
                                <template v-if="order.flage =='4'">
                                    <template v-if="order.expressNum !=null">
                                        <a style="color: black">{{order.expressNum}}</a>
                                    </template>
                                    <template v-else>
                                        <a style="color: red">卖家未发货</a>
                                    </template>
                                </template>
                                <template v-else>
                                    <a style="color: red">未支付</a>
                                </template>
                            </td>
                            <td>
                                <template v-if="site!=null">
                                    <a style="color: black">{{site.consignee}}</a>
                                </template>
                                <template v-else>
                                    <a></a>
                                </template>
                            </td>
                            <td>
                                <template v-if="site!=null">
                                    <a style="color: black">{{site.consigneeNum}}</a>
                                </template>
                                <template v-else>
                                    <a></a>
                                </template>
                            </td>
                            <td>
                                <template v-if="site!=null">
                                    <a style="color: black">{{site.consigneeAddress}}</a>
                                </template>
                                <template v-else>
                                    <a></a>
                                </template>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!--底部-->
<div id="footer11"></div>
<script src="js/vendor/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/jquery.meanmenu.min.js"></script>
<script src="js/jquery-price-slider.js"></script>
<script type="text/javascript" src="js/jquery.simpleGallery.min.js"></script>
<script type="text/javascript" src="js/jquery.simpleLens.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>
<script src="js/dbclick.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="layui/layui.js"></script>
<script>
    //页面固定头尾
    $(function () {
        $('#header11').load("auction-head.html");
        $('#footer11').load('auction-footer.html');
    })

    let orderMassage = new Vue({
        el: "#massgae",
        data: {
            order: {},
            site: {}
        }
    })

    window.showMassage = (oid) => {
        $.ajax({
            url: "/web-order/order/orderMassage",
            method: "post",
            data: {
                oid: oid
            },
            success: function (result) {
                console.log(result.data);
                orderMassage.order = result.data.orderDTO;
                orderMassage.site = result.data.site;
            }
        })
    }

    <!-- 获取url中的参数 -->
    window.getQueryString = (name) => {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return '';
    };

    window.onload = function () {
        let oid = getQueryString("oid");
        showMassage(oid);
    }
</script>
</body>
</html>
